<template>
  <div>
    <!--    轮播素材编辑对话框-->
    <el-dialog
      title="编辑轮播素材"
      @close="$emit('update:show', false)"
      :visible.sync="showDialog"
      :show="show"
    >
      <div>
        <span>
          素材类型：
        </span>
        <el-select v-model="mediaModel.type" size="small" style="width:100px;">
          <el-option label="图片" value="image"></el-option>
          <el-option label="视频" value="video"></el-option>
        </el-select>
        <span style="margin-left: 8px;"> 序号： </span
        ><el-input-number
          v-model="mediaModel.sort"
          size="small"
          style="width: 120px;"
        ></el-input-number>
        <el-upload
          style="display: inline-block;margin-left: 18px;"
          :http-request="handleMediaFileUpload"
          :show-file-list="false"
        >
          <el-button size="small" type="primary" icon="el-icon-picture"
            >添加素材</el-button
          >
        </el-upload>
      </div>
      <el-table
        style="margin-top: 8px;"
        :data="carouselMedias"
        size="small"
        border
      >
        <el-table-column prop="type" label="素材类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 'image'">图片</span>
            <span v-if="scope.row.type === 'video'">视频</span>
          </template>
        </el-table-column>
        <el-table-column prop="link" label="素材链接" align="center">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.type === 'image'"
              fit="contain"
              style="height: 80px;width: 80px;"
              :src="scope.row.link"
            ></el-image>
            <video
              v-if="scope.row.type === 'video'"
              :src="scope.row.link"
              width="80px"
              height="80px"
            ></video>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center">
          <template slot-scope="scope">
            <el-input-number
              style="width: 120px;"
              v-model="scope.row.sort"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              type="danger"
              @click="onDeleteMedia(scope.row, scope.$index)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUploadItemMediaToken,
  uploadFileToAliOss
} from "@/api/admin-api/FileApi";

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    carouselMedias: {
      type: Array,
      defaultValue: []
    }
  },
  watch: {
    show() {
      this.showDialog = this.show;
    }
  },
  name: "ItemMediaEditor",
  data() {
    return {
      showDialog: false,
      // carouselMedias: [],
      mediaModel: {
        type: "image",
        link: "",
        sort: 1
      }
    };
  },
  methods: {
    onDeleteMedia(row, index) {
      console.log(row);
      this.carouselMedias.splice(index, 1);
    },
    onSave() {
      console.log("this.carouselMedias", this.carouselMedias);
      this.carouselMediasJson = JSON.stringify(this.carouselMedias);
      this.showDialog = false;
      console.log("this.carouselMediasJson", this.carouselMediasJson);
      this.$emit("onCarouseMediaSaved", this.carouselMediasJson);
    },
    handleMediaFileUpload({ file }) {
      getUploadItemMediaToken().then(uploadToken => {
        // 上传文件
        const formData = new FormData();
        const fileKey = uploadToken.dir.concat(file.name);
        formData.append("key", fileKey);
        formData.append("policy", uploadToken.policy);
        formData.append("OSSAccessKeyId", uploadToken.ossAccessKeyId);
        formData.append("success_action_status", "200");
        formData.append("signature", uploadToken.signature);
        formData.append("file", file);
        // 上传至阿里云oss
        this.$loading();
        uploadFileToAliOss(uploadToken.fileHost, formData)
          .then(() => {
            this.mediaModel.link = "https://asset.fanghaowu.com/" + fileKey;
            this.carouselMedias.push(Object.assign({}, this.mediaModel));
            this.$loading().close();
          })
          .catch(() => {
            this.$loading().close();
          });
      });
    }
  },
  mounted() {
    // this.carouselMedias = JSON.parse(this.carouselMediasJson);
  }
};
</script>

<style scoped></style>
